<template>
  <div class="find-car-detail "><!-- page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}  -->
    <!-- <van-nav-bar title="寻车详情" fixed placeholder :border="false">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="goback" />
      </template>
    </van-nav-bar> -->
    
    <!-- <navbar :title="title" typePage='寻车记录'></navbar> -->
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      > -->
    <div ><!--  class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}" -->
    <!-- 根据状态判断显示 -->
    <div class="judge-order" :class="orderStatus()">
      <span>{{ message }}</span>
    </div>

    <!-- 根据状态不同显示不同页面 -->

    <!-- 待生成订单 -->
    <div class="to-be-paid" v-if="this.findCarStatus == '00'">
      <!-- <find-car-inform></find-car-inform> -->
      <application-info :applicationInfo="applicationInfo"></application-info>
      <div class="user-brevity">
        <div>
          <div class="left">姓名</div>
          <div class="right">{{ applicationInfo.clientName }}</div>
        </div>
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
      </div>
    </div>

    <!-- 待支付 -->
    <div v-if="this.findCarStatus == '01'">
      <find-car-inform></find-car-inform>
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
      </div>
      <div class="agreement">
        <van-checkbox
          v-model="checked"
          shape="square"
          checked-color="#F6C401"
          icon-size="16px"
        >
          <span>已阅读并同意
            <span href="" 
            @click="goToAgreement"
            style="color:#F6C401;"
            >《寻车协议》</span>
          </span>
        </van-checkbox>
      </div>
      <div class="pay-for">
        <button @click="goback1">取消</button>
        <button @click="payFor(applicationInfo.totalAmount)">
          支付￥{{ applicationInfo.informationCosts }}
        </button>
        <!-- 弹出层 -->
        <van-popup v-model="show" position="bottom" class="selectPay">
          <p style="margin-top: 15px">选择支付方式</p>
          <div class="pay-img-box">
            <img
              @click="wechatPay"
              src="https://chezhuapp.oss-cn-beijing.aliyuncs.com/image/20211126/1d8f0585ff574a1986294476429f2b9e.png"
              alt=""
            />
            <!-- 
              src="../../assets/image/微信支付.png" -->
            <img
              @click="zhiFuBaoPay"
              src="https://chezhuapp.oss-cn-beijing.aliyuncs.com/image/20211126/0207f70c0467485fa1f71df242f3985b.png"
              alt=""
            />
            <!-- 
              src="../../assets/image/支付宝支付.png" -->
          </div>
        </van-popup>
      </div>
    </div>

    <!-- 已支付 -->
    <div
      v-if="
        this.findCarStatus == '02' ||
        this.findCarStatus == '03' ||
        this.findCarStatus == '04' ||
        this.findCarStatus == '05'
      "
    >
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
        <div>
          <div class="left">支付时间</div>
          <div class="right">{{ applicationInfo.userPaymentTime }}</div>
        </div>
        <div>
          <div class="left">退款时间</div>
          <div class="right">{{ applicationInfo.orderRefundTime }}</div>
        </div>
      </div>
    </div>

    <!-- 已完结 -->
    <div v-if="this.findCarStatus == '06'">
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <advice-note :applicationInfo="applicationInfoNew"></advice-note>
      <another-file :fileImage="fileImage"></another-file>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
        <div>
          <div class="left">支付时间</div>
          <div class="right">{{ applicationInfo.userPaymentTime }}</div>
        </div>
        <div>
          <div class="left">完结时间</div>
          <div class="right">{{ applicationInfo.orderCompletionTime }}</div>
        </div>
      </div>
    </div>

    <!-- 已取消 -->
    <div v-if="this.findCarStatus == '07'">
      <application-info :applicationInfo="applicationInfo"></application-info>
      <complete-info :completeInfo="applicationInfo"></complete-info>
      <advice-note :applicationInfo="applicationInfo"></advice-note>
      <div class="someTime">
        <div>
          <div class="left">提交时间</div>
          <div class="right">{{ applicationInfo.createTime }}</div>
        </div>
        <div>
          <div class="left">订单生成时间</div>
          <div class="right">{{ applicationInfo.orderGenerationTime }}</div>
        </div>
        <div>
          <div class="left">支付时间</div>
          <div class="right">{{ applicationInfo.userPaymentTime }}</div>
        </div>
        <!-- <div>
          <div class="left">完结时间</div>
          <div class="right">{{ applicationInfo.orderCompletionTime }}</div>
        </div> -->
        <div>
          <div class="left">取消时间</div>
          <div class="right">{{ applicationInfo.cancelTime }}</div>
        </div>
      </div>
    </div>
    <!-- </van-list> -->
    <!-- </van-pull-refresh> -->

    <!-- 支付返回展示弹窗 -->
    <div>
      <van-popup v-model="showIsPaySuccess" round position="bottom" :style="{ height: '25%' }">
        <div style="width:100%;height:100%;display:flex;flex-direction: column;">
          <div style="flex:1;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #dedede;">
            <div>请确认支付是否已完成</div>
          </div>
          <div style="flex:1;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #dedede;" @click='enterPaySuccess'>
            <div style="color:red;">已完成支付</div>
          </div>
          <div style="flex:1;display:flex;justify-content:center;align-items:center;" @click='againPaySuccess'>
            <div>支付遇到问题,请重新支付</div>
          </div>
        </div>
      </van-popup>
    </div>
    </div>
  </div>
</template>

<script>
import applicationInfo from "../../components/common/applicationInfo.vue";
import findCarInform from "../../components/common/findCarInform.vue";
import completeInfo from "../../components/common/completeInfo.vue";
import adviceNote from "../../components/common/adviceNote.vue";
import anotherFile from "../../components/common/anotherFile.vue";
import { getCarManagementCMyId, getCarManagementCPay } from "./api";
import { Toast } from "vant";

export default {
  components: {
    applicationInfo,
    findCarInform,
    completeInfo,
    adviceNote,
    anotherFile,
  },
  data() {
    return {
      // header栏 => 标题
      title:"寻车详情",
      message: "",
      userInfo: {
        name: "刘余旭",
        submitTime: "2021-9-10 12:13:12",
      },
      orderInfo: {
        price: "600",
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      checked: true,
      show: false,

      // 用户id
      findCarId: "",
      // 当前订单状态值
      findCarStatus: "",
      // 保存订单信息
      applicationInfo: {},
      // 图片回显
      fileImage: [
        {
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0119d95c482e8fa801213f26847b0f.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637736169&t=7947843febc2079a9fa8b067baf74d05",
        },
        {
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0119d95c482e8fa801213f26847b0f.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637736169&t=7947843febc2079a9fa8b067baf74d05",
        },
      ],
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:'',
        // 展示弹出层
        // showIsPaySuccess:true
        showIsPaySuccess:false
    };
  },
  methods: {
    // 跳转到协议
    goToAgreement() {
      this.$router.push({name: 'findCarAgree'})
    },
    // 获取寻车详情数据
    async initCarManagementCMyId() {
      let id = this.findCarId;
      const { data } = await getCarManagementCMyId(id);
      console.log('%c [ data ]', 'font-size:13px; background:pink; color:#bf2c9f;', data)
      this.findCarStatus = data.status;
      this.applicationInfo = data;
      this.applicationInfoNew = data.noticeOfMortgageIntentionC !== null ? data.noticeOfMortgageIntentionC : {};
      this.applicationInfo.informationCosts = this.applicationInfo.informationCosts / 100
      this.fileImage = data.queryCarFiles;
      this.applicationInfo.carModelGuidePrice = this.applicationInfo.carModelGuidePrice / 10000
      this.orderId = data.noticeOfMortgageIntentionC !== null ? data.noticeOfMortgageIntentionC.id : '';
      // 获取寻车状态
      this.judgeOrder();
      // 获取寻车状态对应样式
      this.orderStatus();
    },
    // 获取寻车状态
    judgeOrder() {
      if (this.findCarStatus == "00") {
        this.message = "待生成订单";
      } else if (this.findCarStatus == "01") {
        this.message = "待支付";
      } else if (
        this.findCarStatus == "02" ||
        this.findCarStatus == "03" ||
        this.findCarStatus == "04" ||
        this.findCarStatus == "05"
      ) {
        this.message = "已支付";
      } else if (this.findCarStatus == "06") {
        this.message = "已完结";
      } else if (this.findCarStatus == "07") {
        this.message = "已取消";
      }
    },
    // 获取寻车状态对应样式
    orderStatus() {
      if (this.findCarStatus == "00" || this.findCarStatus == "01") {
        return "active-wait";
      } else if (
        this.findCarStatus == "02" ||
        this.findCarStatus == "03" ||
        this.findCarStatus == "04" ||
        this.findCarStatus == "05"
      ) {
        return "finsh-pay";
      } else if (this.findCarStatus == "06" || this.findCarStatus == "07") {
        return "finsh";
      }
    },
    // 顶部返回按钮
    goback() {
      this.$router.go(-1);
    },
    // 取消返回按钮
    goback1() {
      /* this.$router.push({
        path:'/findcar/findCarRecord'
      }) */
      // 调用原生返回上一页的方法
      if (window.UniAppJSBridge) {
        uni.postMessage({
          data:{
            type:5
          }
        })
      }
    },

    // 支付 点击后弹出层选择支付方式
    payFor(totalAmount) {
      if (this.checked == false) return Toast("请先阅读并同意《寻车协议》");
      // this.applicationInfo.informationCosts = '9999999'
      let numLength = String(this.applicationInfo.informationCosts).length > 6
      if(numLength) return Toast('信息费超过支付限额！')
      this.show = true;
    }, // 微信支付
    async wechatPay() {
      let params = {
        /* 测试数据 => start */
        // id: "06d01ccf-fd91-49a0-ad8a-49c19f41a88e",
        // payip: "47.114.190.170",
        /* 测试数据 => end */

        // 订单ID
        // id:this.orderId,
        id: this.findCarId,
        // 公网IP
        // payip: this.myIpAddress,
        payip: window.payIp,
        // 支付方式
        type: "01",
      };
      const data = await getCarManagementCPay(params);
      if (data.code !== 0) return Toast(data.msg)
      const conf = require('../../utils/conf')
      const baseURL = conf.baseURL
      const token = sessionStorage.getItem('token')
      const url = `${data.data}&redirect_url=${baseURL}findcar/FindCarDetail?id=${this.findCarId}&token=${token}`;
      // let url = data.data + '&redirect_url=hnbin.mynatapp.cc://';
      console.log('%c [ url ]-326', 'font-size:13px; background:pink; color:#bf2c9f;', url)
      // Toast(url)
      if (url == undefined) return Toast(data.msg);
      // this.showIsPaySuccess = !this.showIsPaySuccess
      // return
      window.location.href = url;

      // 设置回调页面打开的tabs栏
      // localStorage.setItem('activeFindCar','allFindCar')

      /* setTimeout(()=>{
        let value = {
          id:this.$route.query.id,
          status:'02'
        }
        this.initCarManagementCUpdataStatus(value)
      },3000) */
    },
    // 支付宝支付
    async zhiFuBaoPay() {
      let params = {
        // 订单ID
        // id:this.orderId,
        id: this.findCarId,
        // 公网IP
        // payip: this.myIpAddress,
        payip: window.payIp,
        // 支付方式
        type: "02",
      };
      const data = await getCarManagementCPay(params);
      if (data.code !== 0) return Toast(data.msg)
      /* ap.tradePay({
        orderStr: data.data
      }, function(res){
        alert('进来了')
        ap.alert(res.resultCode);
      }); */

      let div = document.createElement("div");
      div.innerHTML = data.data;
      document.body.append(div);
      document.forms[0].submit();

      // 设置回调页面打开的tabs栏
      // localStorage.setItem('activeFindCar','allFindCar')
      /* let value = {
        id: this.$route.query.id,
        status: "02",
      };
      this.initCarManagementCUpdataStatus(value); */
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        this.loading = false;

        if (this.list.length >= 0) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    getData() {
      this.applicationInfo = {
        brand: "奥迪",
        type: "A6L",
        contact: "13524678907",
        remark: "这里显示备注信息这里显示备注信息这里显示备注信息",
      };
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams = getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          console.log(
            "%c [ getTokenParams ]",
            "font-size:13px; background:pink; color:#bf2c9f;",
            getTokenParams
          );
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    },
    //获取当前环境
    getEnvironment() {
      //判断当前环境（微信/其他）
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        console.log("微信中");
        let id = window.location.href.split("id=")[1];;
        this.$router.push({
          name:'payCodeLogin',
          query:{
            id
          }
        })
        /* let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // android();
        if (isAndroid) {
            window.location.href ='cncomdo1cookcarc://index';   // 打开app的协议，有安卓同事提供
            window.setTimeout(() => {
              window.location.href = 'cncomdo1cookcarc://index';   // 打开app的协议，有安卓同事提供
              // window.location.href = 'http://www.wjtr.com/download/index.html';  //下载app的协议，有安卓同事提供
            }, 2000);
          
        }
        if (isIOS) {
            let ifr = document.createElement("iframe");
            ifr.src ='cncomdo1cookcarc://index';  // 打开app的协议，有ios同事提供
            ifr.style.display = "none";
            document.body.appendChild(ifr);
            window.setTimeout(() => {
              document.body.removeChild(ifr);
              window.location.href ='cncomdo1cookcarc://index';   // 打开app的协议，有安卓同事提供
              // window.location.href ='http://www.wjtr.com/download/index.html';  // 下载app的地址
            }, 2000);
        } */
      } else {
        console.log("其他（浏览器等等）");
      }
    },
    // 点击支付成功
    enterPaySuccess(){
      this.show = false
      this.showIsPaySuccess = !this.showIsPaySuccess
      this.initCarManagementCMyId();
    },
    // 点击支付成功
    againPaySuccess(){
      this.showIsPaySuccess = !this.showIsPaySuccess
      this.show = true
    }
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 判断是否是在微信内扫描二维码
    this.getEnvironment();
    // 修改页面标题
    document.title = "寻车详情";
    // 获取路由链接上拼接的token值
    this.getTokenInUrl();
    // 获取id
    this.findCarId = this.$route.query.id;
    // 进入支付页时先看看是否能获取到当前的公网IP
    console.log("[ window.payIp ]", window.payIp);
    // 获取寻车详情数据
    this.initCarManagementCMyId();
    // this.getData();
  },
  //设置背景颜色
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
};
</script>

<style scoped lang="less">
.selectPay {
  p {
    text-align: center;
  }
  .pay-img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img:nth-child(1) {
      width: 110px;
      height: 110px;
      padding-right: 50px;
    }
    img:nth-child(2) {
      width: 90px;
      height: 90px;
    }
  }
}
.advice-note {
  margin: 8px 0;
}
.pay-for {
  display: flex;
  padding: 0 16px;
  button {
    flex: 1;
    height: 44px;
    border: none;
    background-color: #ffffff;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 5px;
    margin-bottom: 50px;
  }
  button:nth-child(2) {
    background-color: #f6c401;
    margin-left: 9px;
  }
  button:nth-child(1) {
    border: 1px solid #e6e6e6;
  }
}
.agreement {
  padding: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  span {
    color: #666666;
    a {
      color: #f6c401;
    }
  }
}
.find-car-inform {
  margin-bottom: 8px;
}
.application-info {
  border: 1px solid #eeeeee;
}
.someTime {
  padding: 16px;
  div {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    .left {
      color: #666666;
      margin: 1% 0;
    }
    .right {
      color: #333333;
    }
  }
}
.to-be-paid {
  .user-brevity {
    height: 100px;
    background-color: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular, PingFang SC;
    div {
      display: flex;
      justify-content: space-between;
      div {
        padding: 2% 0;
      }
      .left {
        font-size: 15px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.active-wait {
  background-color: rgba(254, 140, 25, 0.1);
  color: #fe8c19;
}
.finsh-pay {
  color: #0d7ef0;
  background-color: rgba(13, 126, 240, 0.1);
}
.finsh {
  color: #999999;
  background-color: rgba(153, 153, 153, 0.1);
}
.find-car-detail {
  width: 100%;
  height: 100%;
}
.judge-order {
  box-sizing: border-box;
  width: 375px;
  height: 40px;
  padding: 0 16px;
  span {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 40px;
  }
}
</style>
